import React from 'react';
import { useParams } from 'react-router-dom';
import { Table, Tag, Card } from 'antd';

// 假数据：不同用户的订单
const allOrders = [
  { id: 1, username: 'testuser', product: '牛奶', quantity: 2, amount: 13.0, status: '已支付', createdAt: '2024-06-11 10:00:00' },
  { id: 2, username: 'testuser', product: '方便面', quantity: 3, amount: 10.5, status: '未支付', createdAt: '2024-06-10 12:00:00' },
  { id: 3, username: 'user2', product: '篮球鞋', quantity: 1, amount: 299.0, status: '已支付', createdAt: '2024-06-09 09:20:00' },
  { id: 4, username: 'user3', product: 'T恤', quantity: 2, amount: 78.0, status: '已支付', createdAt: '2024-06-08 15:00:00' },
];

const columns = [
  { title: '商品名称', dataIndex: 'product', key: 'product' },
  { title: '数量', dataIndex: 'quantity', key: 'quantity' },
  { title: '金额', dataIndex: 'amount', key: 'amount', render: (v: number) => `￥${v}` },
  { title: '订单状态', dataIndex: 'status', key: 'status', render: (status: string) => status === '已支付' ? <Tag color="green">已支付</Tag> : <Tag color="red">未支付</Tag> },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
];

const UserOrders: React.FC = () => {
  const { username } = useParams();
  const orders = allOrders.filter(o => o.username === username);

  return (
    <div style={{ padding: 24 }}>
      <Card>
        <h2>用户：{username} 的订单</h2>
        <Table rowKey="id" columns={columns} dataSource={orders} pagination={false} />
      </Card>
    </div>
  );
};

export default UserOrders; 